<template>
  <el-drawer :wrapper-closable="false" title="新建流程" :size="500" :visible.sync="innerValue" @open="onDrawerOpen">
    <div class="relative flex h-full flex-col space-y-[24px] pb-[68px] pl-[16px] pr-[4px]">
      <div class="flex min-h-0 flex-1 flex-col overflow-y-auto">
        <div class="common-secondary-bg">
          <div class="common-secondary-title"></div>
          流程基本信息
        </div>
        <el-form
          ref="form"
          class="h-full overflow-y-auto"
          :model="formData"
          :rules="formRules"
          label-suffix="："
          size="small"
          status-icon
          label-position="right"
          label-width="80px"
        >
          <el-form-item :prop="PROPS.key" :label="LABELS.key">
            <el-input v-model.trim="formData[PROPS.key]" class="w-full" clearable />
          </el-form-item>

          <el-form-item :prop="PROPS.name" :label="LABELS.name">
            <el-input v-model.trim="formData[PROPS.name]" class="w-full" clearable />
          </el-form-item>
        </el-form>
      </div>
      <footer class="common-drawer-footer">
        <t-button class="common-search-btn" type="primary" @click="onSubmit">提 交</t-button>
        <t-button class="common-search-btn" type="default" plain @click="innerValue = false">关 闭</t-button>
      </footer>
    </div>
  </el-drawer>
</template>

<script>
import config from "../config";
import vModelMixin from "@/mixin/v-model";
import formAddUpdata from "@/mixin/form-add-updata";

import { modelerCreate } from "@/api/model";

export default {
  name: "DetailDrawer",
  components: {},
  mixins: [vModelMixin, formAddUpdata],
  props: {},
  data() {
    return {
      ...config,
      formData: {},
      formRules: {},
    };
  },
  computed: {},
  methods: {
    onDrawerOpen() {
      this.addRulesMixin([this.PROPS.key, this.PROPS.name]);
      this.$nextTick(() => this.$refs["form"].clearValidate());
    },
    onSubmit() {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          const data = await modelerCreate(this.formData);
          this.innerValue = false;
          this.$emit("on-submit-success");
          this.$router.push({
            path: `flow-path-detail-mgmt/${data.id}`,
            query: {
              [this.$store.state.settings.detailName]: this.formData[this.PROPS.name],
            },
          });
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped></style>
